<template>
    <div class="f-header">
        <main-title text="基础用法"></main-title>
        <f-header :fixed='false'>标题</f-header>

        <main-title text="左右文字"></main-title>
        <f-header :fixed='false' left-text="返回" right-text="更多...">标题</f-header>

        <main-title text="使用插槽"></main-title>
        <f-header :fixed='false' left-text="返回" text="标题">
            <template v-slot:right>
               <f-icon name="search" size="4.267vw"></f-icon>
            </template>
        </f-header>

        <main-title text="触发事件"></main-title>
        <f-header :fixed='false' left-text="返回" right-text="按钮" @click-left="left" @click-right="right">标题</f-header>
    </div>
</template>

<script>
import MainTitle from '../components/mainTitle.vue'
export default {
    name:"Header",
    data(){
        return {
        }
    },
    components:{
        MainTitle
    },
    methods:{
        left:function(){
            alert('触发左侧事件')
        },
        right:function(){
            alert('触发右侧事件')
        }
    }
        
}
</script>

<style lang="scss" scoped>
</style>